<template>
  <div>
    <div class="rank-item">
      <el-row type="flex" justify="flex" align="middle">
        <div class="rank-num" :style="{'background-color': color}">{{index}}</div>
        <div class="rank-inner">
          <div class="rank-title">
            <div class="text">{{name}}</div>
            <div class="value">{{value}}</div>
          </div>
          <div class="rank-progress">
            <el-progress :percentage="percentage" :show-text="false" :stroke-width="16"></el-progress>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    color: {
      default: 'rgba(255,255,255,.3)',
      type: String
    },
    index: {
      default: '-',
      type: Number
    },
    name: {},
    value: {},
    percentage: {}
  }
}
</script>
<style lang="stylus" scoped>
  .rank-item
    .rank-num
      width 42px
      height 42px
      color #ffffff
      text-align center
      line-height 42px
      border-radius 3px
    .rank-inner
      flex 1
      padding-left 15px
      .rank-title
        font-size 14px
        overflow hidden
        position relative
        .text
          float left
          width 80%
        .value
          float right
          color #35ced8
      .rank-progress
        margin-top 5px
        >>> .el-progress-bar__outer
          background-color rgba(39,58,121,.5)
          border-radius 3px
        >>> .el-progress-bar__inner
          background linear-gradient(90deg, #2a8ad0 0%, #3af3ce 100%)
          border-radius 3px
</style>